<template>
    <view class="searchPage" :class="{ bgF5: queryType == 2 && list.length }" :style="{ '--color': color, '--total-height': totalHeight + 'px' }">
        <status-bar title="搜索结果"></status-bar>
        <view class="topArea bgwhite">
            <view class="search bor_f2 bor_radius_30 d-flex a-center" @click="$rectTo('/pages/classify/search?mode=' + mode)">
                <view class="color_33">{{ queryStr }}</view>
            </view>
            <u-tabs
                :list="tabList"
                :current="current"
                :lineColor="color"
                :inactiveStyle="{ transform: 'scale(1)' }"
                @click="tabClick"
                :activeStyle="{ color, fontWeight: 'bold', transform: 'scale(1.05)' }"
            ></u-tabs>
            <view class="sort-area d-flex j-sa a-center color_33 p-re">
                <!-- 小店 -->
                <block v-if="queryType == 4">
                    <view class="screenList" @click="screenBtn(item)" v-for="(item, index) in screenData" :key="index">
                        <text class="scrTxt" :class="{ active: xiaoType == item.type }">{{ item.name }}</text>
                        <view class="iconeniBox" v-if="item.type">
                            <view class="iconfont icon-paixu-shang iconeni size22" :class="{ active: xiaoType == item.type && item.state == 1 }"></view>
                            <view class="iconfont icon-paixu-xia iconeni size22" :class="{ active: xiaoType == item.type && item.state == 2 }"></view>
                        </view>
                    </view>
                    <view @click="toggleCss">
                        <text class="iconfont icon-liebiao4 size40" v-if="togClass"></text>
                        <text class="iconfont icon-liebiao size40" v-else></text>
                    </view>
                </block>
                <!-- 商品 -->
                <block v-if="queryType == 1">
                    <view class="d-flex a-center" :class="{ thmeColor: goodsSort != 5 && goodsSort != 6 }" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="goodsSort == 1">新品</template>
                            <template v-else-if="goodsSort == 2">热度</template>
                            <template v-else-if="goodsSort == 3">升序</template>
                            <template v-else-if="goodsSort == 4">降序</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{ thmeColor: goodsSort == 5 }" @click="navClick('goodsSort', '5')">销量</view>
                    <view class="size28" :class="{ thmeColor: goodsSort == 6 }" @click="navClick('goodsSort', '6')">好评</view>
                    <view @click="toggleCss">
                        <text class="iconfont icon-liebiao4 size40" v-if="togClass"></text>
                        <text class="iconfont icon-liebiao size40" v-else></text>
                    </view>
                    <view @click="checkScreen = true">
                        <text class="size28 m-right6">筛选</text>
                        <text class="iconfont icon-shaixuan size22 bold"></text>
                    </view>
                    <!-- '综合'下拉菜单 -->
                    <view class="top-pop width bgwhite p-ab hidden" :class="{ active1: checkTab }">
                        <view class="item d-flex j-sb a-center" :class="{ top_borF5: index }" v-for="(item, index) in sortList" :key="index" @click="navClick('goodsSort', item.sort)">
                            <text class="size28" :class="{ thmeColor: goodsSort == item.sort }">{{ item.name }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="goodsSort == item.sort"></text>
                        </view>
                    </view>
                </block>
                <!-- 店铺 -->
                <block v-if="queryType == 2">
                    <view class="d-flex a-center" :class="{ thmeColor: ['0', '1', '2'].includes(storeSort) }" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="storeSort == 1">新店</template>
                            <template v-else-if="storeSort == 2">热度</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{ thmeColor: storeSort == 3 }" @click="navClick('storeSort', '3')">销量</view>
                    <view class="size28" :class="{ thmeColor: storeSort == 4 }" @click="navClick('storeSort', '4')">好评</view>
                    <view class="size28" :class="{ thmeColor: storeSort == 5 }" @click="navClick('storeSort', '5')">距离</view>
                    <view class="top-pop width bgwhite p-ab hidden" :class="{ active2: checkTab }">
                        <view
                            class="item d-flex j-sb a-center"
                            :class="{ top_borF5: index }"
                            v-for="(item, index) in ['综合', '新店', '热度']"
                            :key="index"
                            @click="navClick('storeSort', String(index))"
                        >
                            <text class="size28" :class="{ thmeColor: storeSort == index }">{{ item }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="storeSort == index"></text>
                        </view>
                    </view>
                </block>
                <!-- 资讯 -->
                <block v-if="queryType == 3">
                    <view class="d-flex a-center" :class="{ thmeColor: ['0', '1', '2'].includes(articleSort) }" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="articleSort == 1">新加</template>
                            <template v-else-if="articleSort == 2">热度</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{ thmeColor: articleSort == 3 }" @click="navClick('articleSort', '3')">点赞</view>
                    <view class="size28" :class="{ thmeColor: articleSort == 4 }" @click="navClick('articleSort', '4')">评论</view>
                    <view @click="toggleCss">
                        <text class="iconfont icon-liebiao size40" v-if="togClass"></text>
                        <text class="iconfont icon-liebiao4 size40" v-else></text>
                    </view>
                    <view class="top-pop width bgwhite p-ab hidden" :class="{ active2: checkTab }">
                        <view
                            class="item d-flex j-sb a-center"
                            :class="{ top_borF5: index }"
                            v-for="(item, index) in ['综合', '新加', '热度']"
                            :key="index"
                            @click="navClick('articleSort', String(index))"
                        >
                            <text class="size28" :class="{ thmeColor: articleSort == index }">{{ item }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="articleSort == index"></text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view class="mask" v-if="checkTab" @click="checkTab = false"></view>
        <view class="p-topTotal">
            <!-- 小店 -->
            <view class="padding10-20" v-if="queryType == 4 && list.length">
                <view class="Wrapper" v-if="togClass">
                    <view class="List" @click="toGoods(item.goods_id)" v-for="(item, index) in list" :key="item.goods_id">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                        <view class="box">
                            <view class="titleBox">
                                <text class="title ellipsis_2">{{ item.name }}</text>
                            </view>
                            <view class="Info">
                                <view class="price color_ff4 bold500">
                                    <text class="size22 m-top6">￥</text>
                                    <text class="size36">{{ item.price }}</text>
                                </view>
                            </view>

                            <view class="brokerage">
                                <view class="brokerageBox">{{ item.profitTitle }}</view>
                                <view class="Share">抢</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dataBox" v-else>
                    <view class="List" @click="toGoods(item.goods_id)" v-for="(item, index) in list" :key="item.goods_id">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                        <view class="dataContent">
                            <view class="d-flex f-column">
                                <text class="name ellipsis_2">{{ item.name }}</text>
                                <text class="info ellipsis" v-if="item.info">{{ item.info }}</text>
                            </view>
                            <view class="row a-center">
                                <view class="d-flex a-center black m-right10 bold500">
                                    <text class="size22 m-top6">￥</text>
                                    <text class="size36">{{ item.price }}</text>
                                </view>
                                <text class="color_ff4 size26">{{ item.profitTitle }}</text>
                                <view class="rob">抢</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 商品 -->
            <view class="padding20" v-if="queryType == 1 && list.length">
                <view v-if="togClass">
                    <waterfall v-model="list"></waterfall>
                </view>
                <view v-else>
                    <view class="d-flex m-bot20" v-for="(item, index) in list" :key="index" @click="toGoods(item.goods_id, item.store_id)">
                        <image :src="item.img ? $imgUrls(item.img) : defaultUrl" mode="aspectFill" class="goods_img bor_radius_10"></image>
                        <view class="flex-1 padding10-20 d-flex f-column j-sb">
                            <view class="size28 ellipsis_2">{{ item.name }}</view>
                            <view class="color_99">
                                <text class="m-right20" v-if="item.sales_number != 0">已售{{ item.sales_number }}</text>
                                <text class="m-right20" v-if="item.show_number != 0">热度{{ item.show_number }}</text>
                                <text v-if="item.commentNum != 0">评价{{ item.commentNum }}</text>
                            </view>
                            <view class="color_FOD" v-if="item.buy_config.state == 1">
                                ￥
                                <text class="size32 bold">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                            </view>
                            <view class="d-flex a-center" @click.stop="toUrl('/pages/store/storeIndex?shop_id=' + item.store_id)" v-if="item.storeInfo.store_id">
                                <view class="type thmeBg bor_radius_6 h7 white" v-if="item.storeInfo.bussName">{{ item.storeInfo.bussName }}</view>
                                <view class="flex-1 color_66 ellipsis m-left10">{{ item.storeInfo.name }}</view>
                                <view class="m-left10">
                                    进店
                                    <text class="iconfont icon-xiangyouxiayiye h7"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 店铺 -->
            <view class="padding20" v-if="queryType == 2 && list.length">
                <view class="bgwhite bor_radius_20 padding30 m-bot20" v-for="(item, index) in list" :key="index" @click="toUrl('/pages/store/storeIndex?shop_id=' + item.store_id)">
                    <view class="d-flex">
                        <image class="logo bor_radius m-right20" :src="$imgUrls(item.logo)" mode="aspectFill"></image>
                        <view class="flex-1">
                            <view class="d-flex a-center m-bot10">
                                <view class="type thmeBg bor_radius_6 h7 white" v-if="item.bussName">{{ item.bussName }}</view>
                                <view class="flex-1 size30 ellipsis m-left10">{{ item.name }}</view>
                                <view class="m-left10">
                                    进店
                                    <text class="iconfont icon-xiangyouxiayiye h6"></text>
                                </view>
                            </view>
                            <view class="d-flex m-bot10">
                                <view class="color_FOD m-right20" v-if="item.score != 0">
                                    <text class="bold">{{ item.score }}</text>
                                    分
                                </view>
                                <view class="color_68 m-right20" v-if="item.sales_number != 0">销量{{ item.sales_number }}</view>
                                <view class="color_68" v-if="item.browsingV != 0">热度{{ item.browsingV }}</view>
                            </view>
                            <view class="d-flex a-center color_68" v-if="item.address">
                                <text class="iconfont icon-wodedizhi1 m-right10"></text>
                                <view class="flex-1 ellipsis">{{ item.address }}</view>
                                <view class="p-left10" v-if="item.distance">{{ item.distance }}km</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 资讯 -->
            <view v-if="queryType == 3 && list.length">
                <view class="p-left30 p-right30" v-if="togClass">
                    <view class="p-top30 p-bot30 bot" v-for="(item, index) in list" :key="index" @click="$pop.artDetails(item)">
                        <!-- 没有图片 -->
                        <view class="size32 ellipsis_2" v-if="!item.website_article_img && !item.photoArr">{{ item.website_article_title }}</view>
                        <!-- 右边小图 -->
                        <view class="d-flex" v-else-if="item.website_article_img && !item.photoArr">
                            <view class="flex-1 m-right30">
                                <view class="size32 ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
                                <view class="size28 color_77 ellipsis">{{ item.website_article_info }}</view>
                            </view>
                            <image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="small_img"></image>
                        </view>
                        <!-- 一张大图 -->
                        <view v-else-if="item.photoArr.length == 1">
                            <view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
                            <image :src="$imgUrls(item.photoArr[0])" mode="aspectFill" class="big_img m-top30"></image>
                        </view>
                        <!-- 多图 -->
                        <view v-else-if="item.photoArr.length > 1">
                            <view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
                            <scroll-view scroll-x class="scroll-row m-top20">
                                <image :src="$imgUrls(subItem)" mode="aspectFill" class="more_img" v-for="(subItem, subIndex) in item.photoArr" :key="subIndex"></image>
                            </scroll-view>
                        </view>
                        <view class="color_77 m-top40">
                            <text class="m-right12" v-if="item.website_article_views != 0">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12" v-if="item.allZan != 0">{{ item.allZan }}点赞</text>
                            <text v-if="item.allComment != 0">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                </view>
                <view class="padding20" v-else>
                    <waterfall v-model="list" type="article"></waterfall>
                </view>
            </view>

            <view class="color_66 text-center padding20" v-if="noMore && page > 1">没有更多了</view>
            <emptys v-if="noData" empty="search" title="没有搜索结果"></emptys>
        </view>

        <!-- 右侧弹出层 -->
        <view class="right-pop wh" v-if="checkScreen" @click="checkScreen = false">
            <view class="content viewbox600 height bgwhite p-ab d-flex f-column" @click.stop>
                <text class="iconfont icon-guanbi1 size30" @click="checkScreen = false"></text>
                <view class="flex-1 scroll-y p-left30">
                    <view class="size26 bold m-bot30 m-top20">价格区间</view>
                    <view class="d-flex a-center m-bot40 text-center color_33">
                        <input class="range flex-1 m-right10" v-model="queryParams.price1" type="number" placeholder="最低价" />
                        <text class="iconfont icon-jianhao color_66 m-right10"></text>
                        <input class="range flex-1 m-right30" v-model="queryParams.price2" type="number" placeholder="最高价" />
                    </view>
                    <view class="size26 bold m-bot30 m-top20">分类</view>
                    <view
                        class="option"
                        :class="{ 'thmeBg white': queryParams.classify_id == item.id }"
                        v-for="(item, index) in classifyData.peerClass"
                        :key="index"
                        @click="checkClass('classify_id', item.id)"
                    >
                        {{ item.name }}
                    </view>
                </view>
                <view class="d-flex j-se p-top30 p-top30">
                    <view class="btn flexac bor_cc color_33" @click="handleReset">重置</view>
                    <view class="btn flexac thmeBg white" @click="handleConfirm">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import waterfall from '../components/search/waterfall.vue';
    export default {
        data() {
            return {
                defaultUrl: this.staticUrl + '/images/imageLoading.png',
                mode: '4', // 可供查询类型的字符串
                queryStr: '', // 关键字
                queryType: '',
                tabList: [
                    { name: '商品', mode: '1' },
                    { name: '店铺', mode: '2' },
                    { name: '资讯', mode: '3' },
                    { name: '小店', mode: '4' }
                ],
                screenData: [
                    {
                        name: '默认',
                        state: 1,
                        type: ''
                    },
                    {
                        name: '佣金',
                        type: 6,
                        state: 1
                    },
                    {
                        name: '价格',
                        type: 1,
                        state: 1
                    }
                ],
                xiaoType: '',
                xiaoState: 2, // 排序方式（除 type=5外） 1正序 2倒序
                current: 0,
                list: [],
                page: 1,
                limit: 10,
                checkTab: false, // '综合'下拉菜单
                togClass: true, // 切换样式
                noData: false,
                noMore: false,
                // 商品
                checkScreen: false, // 打开筛选
                goodsSort: '0',
                sortList: [
                    { name: '综合', sort: '0' },
                    { name: '新品', sort: '1' },
                    { name: '热度', sort: '2' },
                    { name: '价格升序', sort: '3' },
                    { name: '价格降序', sort: '4' }
                ],
                classifyData: '',
                queryParams: {
                    price1: '', // 最低价
                    price2: '', // 最高价
                    classify_id: ''
                },
                // 店铺
                storeSort: '0',
                // 资讯
                articleSort: '0'
            };
        },
        computed: {
            ...mapState(['color', 'totalHeight'])
        },
        components: {
            waterfall
        },
        onLoad(e) {
            if (e.name) this.queryStr = e.name;
            // if (e.mode) this.mode = `${e.mode},4`;
            this.getTabs();
        },
        methods: {
            getTabs() {
                let arr = this.mode.split(',');
                this.tabList = this.tabList.filter((item) => arr.includes(item.mode));
                if (arr.find((num) => num == 1)) this.getClassify();
                this.tabClick();
            },
            tabClick(e) {
                if (e) {
                    this.current = e.index;
                    // 重置
                    this.togClass = true;
                    this.checkTab = false;
                    this.goodsSort = this.storeSort = this.articleSort = '0';
                }
                this.queryType = this.tabList[this.current].mode;
                this.dataInit();
            },
            dataInit() {
                this.$showLoading('正在加载');
                this.page = 1;
                this.list = [];
                this.getResult();
            },
            getResult() {
                this.noData = false;
                this.noMore = false;
                let params = {};
                if (this.queryType == 1) params = { ...this.queryParams, goodsSort: this.goodsSort };
                if (this.queryType == 2) params.storeSort = this.storeSort;
                if (this.queryType == 3) params.articleSort = this.articleSort;
                if (this.queryType == 4) {
                    params['type'] = this.xiaoType;
                    params['state'] = this.xiaoState;
                }

                this.$http
                    .post({
                        url: '/comprehensiveQuery/queryApi',
                        data: {
                            queryStr: this.queryStr,
                            queryType: this.queryType,
                            page: this.page,
                            limit: this.limit,
                            ...params
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        let result;
                        if (this.queryType == 1) result = res.data.goods;
                        if (this.queryType == 2) result = res.data.store;
                        if (this.queryType == 3) result = res.data.article;
                        if (this.queryType == 4) result = res.data.wechatstore;

                        if (result) {
                            if (result.list) this.list = this.page == 1 ? result.list : this.list.concat(result.list);
                            if (!result.list || result.list.length < this.limit) this.noMore = true;
                        }
                        if (!this.list.length) this.noData = true;
                    });
            },
            getClassify() {
                this.$http
                    .post({
                        // 若传classify_id可得下级分类
                        url: '/singleSaleApi/getClassify'
                    })
                    .then((res) => {
                        this.classifyData = res.data || '';
                    });
            },
            navClick(key, value) {
                this[key] = value;
                setTimeout(() => {
                    this.checkTab = false;
                }, 200);
                this.dataInit();
            },
            toggleCss() {
                this.togClass = !this.togClass;
                this.dataInit();
            },
            checkClass(key, value) {
                this.queryParams[key] = this.queryParams[key] == value ? '' : value;
            },
            handleReset() {
                for (let key in this.queryParams) {
                    this.queryParams[key] = '';
                }
                this.checkScreen = false;
                this.dataInit();
            },
            handleConfirm() {
                if (Number(this.queryParams.price1) > Number(this.queryParams.price2)) {
                    let max = this.queryParams.price2;
                    this.queryParams.price2 = this.queryParams.price1;
                    this.queryParams.price1 = max;
                }
                this.checkScreen = false;
                this.dataInit();
            },
            screenBtn(item) {
                this.xiaoType = item.type;

                if (this.xiaoState == 2) {
                    item.state = 1;
                    this.xiaoState = 1;
                } else {
                    item.state = 2;
                    this.xiaoState = 2;
                }
                this.dataInit();
            }
        },
        onReachBottom() {
            // 设置"scroll-y"不会触发
            if (this.noMore) return;
            this.page++;
            this.getResult();
        }
    };
</script>

<style lang="scss" scoped>
    // 小店

    .screenList {
        // flex: 1;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        .scrTxt {
            color: #333;
            font-size: 30rpx;
        }
        .active {
            color: var(--color);
        }
        .iconeniBox {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 4rpx;
            margin-top: 6rpx;
            .iconeni {
                scale: 0.7;
                line-height: 16rpx;
                color: #333;
            }
            .active {
                color: var(--color);
            }
        }
    }

    .Wrapper {
        width: 100%;
        display: flex;

        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 10rpx;
        .List {
            width: 348rpx;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            border-radius: 10rpx 10rpx;
            position: relative;
            overflow: hidden;
            // border: 1px solid #f1f1f1;
            overflow: hidden;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 8rpx 16rpx 0px;
            .store-product,
            .popCenter {
                width: 100%;
                height: 86%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #fff;
                z-index: 11;
                opacity: 0;
            }

            .Img {
                width: 100%;
                height: 350rpx;
                border-radius: 10rpx 10rpx 0 0;
            }
            .box {
                width: 100%;
                padding: 10rpx;
                display: flex;
                flex-direction: column;
                .titleBox {
                    width: 100%;
                    height: 90rpx;
                    .title {
                        color: #000;
                        font-size: 30rpx;
                        font-weight: 500;
                    }
                }

                .Info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10rpx;
                    .price {
                        display: flex;
                        align-items: center;
                    }
                    .Sold {
                        font-size: 20rpx;
                    }
                }
                .brokerage {
                    width: 100%;
                    height: 74rpx;
                    background: var(--back-color);
                    border: 1px solid var(--color);
                    border-radius: 10rpx;
                    margin-top: 18rpx;
                    display: flex;
                    align-items: center;
                    .brokerageBox {
                        flex: 1;
                        padding: 0 10rpx;
                        display: flex;
                        align-items: center;
                        color: var(--color);
                        font-size: 24rpx;
                        font-weight: 500;
                    }
                    .Share {
                        height: 100%;
                        background-color: var(--color);
                        color: #fff;
                        font-size: 30rpx;
                        display: flex;
                        align-items: center;
                        padding: 0 24rpx;
                    }
                }
                .userInfo {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-top: 14rpx;
                    .User {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        .picture {
                            width: 50rpx;
                            height: 50rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }
                    }
                    .Store {
                        width: 70rpx;
                        height: 40rpx;
                        border: 1px solid var(--color);
                        font-size: 20rpx;
                        color: var(--color);
                        border-radius: 6rpx;
                        margin-left: 10rpx;
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

    .dataBox {
        width: 100%;
        box-sizing: border-box;
        .List {
            width: 100%;
            padding: 24rpx 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f1f1f1;
            .Img {
                width: 220rpx;
                height: 220rpx;
                border-radius: 10rpx;
                margin-right: 10rpx;
            }
            .dataContent {
                flex: 1;
                height: 180rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name {
                    color: #000;
                    font-size: 28rpx;
                    font-weight: 500;
                }
                .info {
                    color: #999;
                    font-size: 24rpx;
                }
                .rob {
                    padding: 6rpx 30rpx;
                    border-radius: 10rpx;
                    color: #fff;
                    font-size: 28rpx;
                    background-color: var(--color);
                    margin-left: auto;
                }
            }
        }
    }

    .searchPage {
        min-height: 100vh;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .topArea {
        width: 100%;
        position: fixed;
        top: var(--total-height);
        left: 0;
        z-index: 99;
    }
    .p-topTotal {
        padding-top: calc(148rpx + 44px);
    }
    .search {
        margin: 0 20rpx;
        height: 60rpx;
        padding: 0 20rpx;
    }
    .sort-area {
        height: 88rpx;
        .top-pop {
            height: 0;
            left: 0;
            top: 88rpx;
            transition: height 0.2s;
            &.active1 {
                height: 400rpx;
            }
            &.active2 {
                height: 240rpx;
            }
            .item {
                height: 80rpx;
                line-height: 80rpx;
                padding: 0 24rpx;
            }
        }
    }
    // 商品
    .goods_img {
        width: 240rpx;
        height: 240rpx;
    }
    // 店铺
    .logo {
        width: 100rpx;
        height: 100rpx;
    }
    .type {
        width: fit-content;
        line-height: 32rpx;
        padding: 0 10rpx;
    }
    // 资讯
    .small_img {
        width: 200rpx;
        height: 120rpx;
    }
    .big_img {
        height: 340rpx;
    }
    .more_img {
        width: 210rpx;
        height: 180rpx;
        &:not(:last-child) {
            margin-right: 30rpx;
        }
    }
    .mask {
        z-index: 90;
        transition: all 0.2s;
    }
    .right-pop {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        .content {
            top: 0;
            animation: fade-in 0.2s linear forwards;
            padding-top: var(--total-height);
            .icon-guanbi1 {
                margin: 20rpx 24rpx 0 auto;
            }
            .option {
                display: inline-block;
                min-width: 160rpx;
                line-height: 56rpx;
                text-align: center;
                background: #f9f9f9;
                border-radius: 56rpx;
                color: #333;
                padding: 0 10rpx;
                margin: 0 30rpx 20rpx 0;
            }
            .range {
                height: 56rpx;
                background: #f9f9f9;
                border-radius: 56rpx;
            }
            .btn {
                width: 220rpx;
                height: 66rpx;
                border-radius: 33rpx;
                margin-bottom: calc(30rpx + constant(safe-area-inset-bottom));
                margin-bottom: calc(30rpx + env(safe-area-inset-bottom));
            }
        }
    }
    @keyframes fade-in {
        0% {
            right: -600rpx;
        }
        100% {
            right: 0;
        }
    }
</style>
